<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--面板-->
<canvas id="canvas" style="background-color: #000000;">您当前的版本不支持，请升级版本！</canvas>
<script type="text/javascript">

    //拿到面板
    var canvas = document.getElementById('canvas');
    canvas.width = 1000;
    canvas.height = 700;

    //获取上下文
    var context = canvas.getContext('2d');
    context.lineWidth = 10;
    context.strokeStyle = 'green';
    context.fillStyle = 'red';

//    //绘制10段弧线
//    for(var i=0;i<10;i++){
//        context.beginPath();
//        context.arc(160+i*40,300,30,0,2.0*Math.PI*(i+1)/10);
////        context.closePath();
//        context.stroke();
//    }

    for(var i=0;i<10;i++){
        context.beginPath();
        context.arc(160+i*40,300,30,0,2.0*Math.PI*(i+1)/10);
//        context.closePath();
        context.stroke();
        context.fill();
    }
</script>
</body>
</html>